<div id="query-detail" v-cloak>
  <div purpose="page-container">
    <div purpose="page-content">
      <docs-nav-and-search search-filter="queries" current-section="queries" :algolia-public-key="algoliaPublicKey"></docs-nav-and-search>
      <div purpose="breadcrumbs" class="d-flex flex-row align-items-start">
        <div>
          <a purpose="breadcrumbs-category" class="text-nowrap" href="/queries">Queries</a>/
        </div>
        <div purpose="breadcrumbs-title">
          <span><%- query.name %></span>
        </div>
      </div>
      <div purpose="query-details-and-sidebar" class="d-flex flex-lg-row flex-column">
        <div purpose="query-details" class="d-flex flex-column">
          <h2 purpose="query-name"><%- query.name %></h2>
          <div purpose="query-attribution">
            <img alt="Contributor's GitHub profile picture" purpose="contributor-profile-picture" src="https://github.com/<%- query.contributors[0].handle %>.png?size=200">
            <a purpose="query-link" href="https://github.com/<%- query.contributors[0].handle %>" class="d-flex align-items-center">
            <p purpose="contributor-profile-name" class="mb-0"><%= query.contributors[0].name %></p></a>
          </div>
          <p purpose="query-description"><%- query.description %></p>
          <div purpose="query-check">
            <p>To learn more about queries, <a href="/guides/queries">check this guide</a>.</p>
            <div purpose="codeblock">
              <div purpose="codeblock-tabs" >
                <a purpose="codeblock-tab" :class="[ selectedTab === 'sql' ? 'selected' : '']" @click="selectedTab = 'sql'">Query</a>
                <a purpose="codeblock-tab" :class="[ selectedTab === 'ps' ? 'selected' : '']"  @click="selectedTab = 'ps'" v-if="query.powershell">PowerShell<span purpose="new-badge">NEW</span></a>
                <a purpose="codeblock-tab" :class="[ selectedTab === 'bash' ? 'selected' : '']"  @click="selectedTab = 'bash'" v-if="query.bash">Bash<span purpose="new-badge">NEW</span></a>
                <div purpose="copy-button-tab">
                  <div purpose="copy-button"></div>
                </div>
              </div>
              <pre v-show="selectedTab === 'sql'"><code class="hljs sql" v-pre><%= query.query %></code></pre>
              <pre v-show="selectedTab === 'ps'"><code class="hljs ps has-linebreaks" v-pre><%= query.powershell %></code></pre>
              <pre v-show="selectedTab === 'bash'"><code class="hljs sh" v-pre><%= query.bash %></code></pre>
            </div>
            <div purpose="powershell-note" v-if="selectedTab === 'ps'">
              <img src="/images/icon-info-16x16@2x.png" alt="An icon indicating that this section has important information">
              <div purpose="note-text">
                <p>PowerShell commands are currently work in progress, <a :href="'https://github.com/fleetdm/fleet/edit/main/'+queryLibraryYmlRepoPath">contributions welcome</a>.</p>
              </div>
            </div>
            <div purpose="powershell-note" v-if="selectedTab === 'bash'">
              <img src="/images/icon-info-16x16@2x.png" alt="An icon indicating that this section has important information">
              <div purpose="note-text">
                <p>Bash commands for macOS are currently work in progress, <a :href="'https://github.com/fleetdm/fleet/edit/main/'+queryLibraryYmlRepoPath">contributions welcome</a>.</p>
              </div>
            </div>
          </div>
        </div>
        <div purpose="sidebar-container">
          <div purpose="right-sidebar" class="d-flex flex-column">
            <div purpose="query-platform">
              <h4>Platform</h4>
              <div class="d-flex flex-row">
                <h1><img src="/images/os-macos-dark-24x24@2x.png" alt="macOS" :class="[ selectedTab === 'ps' ? 'muted' : '']" v-if="query.platform.includes('darwin')"/>Apple</h1>
                <h1><img src="/images/os-windows-dark-24x24@2x.png" alt="Windows" :class="[ selectedTab === 'bash' ? 'muted' : '']" v-if="query.platform.includes('windows')"/>Windows</h1>
                <h1><img src="/images/os-linux-dark-24x24@2x.png" alt="Linux" :class="[ selectedTab === 'ps' || selectedTab === 'bash' ? 'muted' : '']" v-if="query.platform.includes('linux')"/>Linux</h1>
                <h1><img src="/images/os-chromeos-dark-24x24@2x.png" alt="ChromeOS" :class="[ selectedTab === 'ps' || selectedTab === 'bash' ? 'muted' : '']" v-if="query.platform.includes('chrome')"/>ChromeOS</h1>
              </div>
            </div>
            <div purpose="docs-links" class="order-3">
              <a purpose="sidebar-link" :href="'https://github.com/fleetdm/fleet/edit/main/'+queryLibraryYmlRepoPath+'#L'+query.lineNumberInYaml"> <img src="/images/icon-edit-16x16@2x.png" alt="Suggest an edit">Edit</a>
              <a purpose="sidebar-link" href="/contact"><img alt="Talk to an engineer" src="/images/icon-contact-16x16@2x.png">Get a demo</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <signup-modal></signup-modal>
</div>
<%- /* Expose server-rendered data as window.SAILS_LOCALS :: */ exposeLocalsToBrowser() %>
